/*
@author: stanfor
@date: 2022/8/18 18:29
@Version: 1.0
@last modify time : 2022/8/18 18:29
*/

import React, { useState, useEffect } from 'react';
import { Button, Select } from 'antd';
import SForm, { SFields, NForm } from '@C/base/SForm';
import { setCookie } from '@U/config';
import { getAntdIcon } from '@U/tool';
import { getLoginRequest } from '@S/asyncAction/login';
import './index.less';

const styleLayout = {
  style: { marginLeft: 8 },
  span: 24,
  label: '',
  size: 'large',
  required: true,
};
const defaultOptions = [
  { label: '@163.com', value: '@163.com', },
  { label: '@qq.com', value: '@qq.com' },
  { label: '@google.com', value: '@google.com', },
  { label: '@yahoo.com', value: '@yahoo.com', },
  { label: '其它', value: '', },
];

const Index = (props) => {
  const { dispatch, setIsLogin } = props;
  const [useForm] = NForm.useForm();
  const [accountSuffix, setAccountSuffix] = useState('@163.com');

  const loginHandle = (e, click) => {
    // 非点击状态下监听回车键
    if (!click && e.keyCode !== 13) return;
    useForm.validateFields().then((formValues) => {
      const userInfo = {
        token: '111',
      };
      setCookie('userInfo', userInfo, 1);
      setIsLogin(true);
      dispatch(getLoginRequest('调接口获取登录用户信息'));

      const params = {
        ...formValues,
        password: `${formValues.password}${accountSuffix}`
      };
      console.log(params);
    });

    // dispatch(useAsyncThunk('movie/getMovie', getLoginRequest()));
    // dispatch({ type: 'movie/getLoginInfo/fulfilled', payload: '这个 payload 可能用于派发其它额外参数，但不建议这么干' });
  };

  // 初始化装载 keypress 事件，监听页面回车键
  useEffect(() => {
    // 组件挂载时候，注册键盘监听事件
    window.document.addEventListener('keypress', loginHandle);
    return () => {
      // 组件卸载时候，注销键盘监听事件
      window.document.removeEventListener('keypress', loginHandle);
    };
  }, []);

  return (
    <div className="mobile-number-login">
      <SForm
        autoComplete
        hideEventBtn
        labelCol={24}
        form={useForm}
      >
        {/* antd 组件默认会向右多出 16 px，所以需要向左平移8，保持居中 */}
        <SFields.Input
          { ...styleLayout }
          name="account"
          addonAfter={
            <Select
              value={accountSuffix}
              onChange={(suffix) => setAccountSuffix(suffix)}
              className="select-after"
              options={defaultOptions}
            />
          }
          placeholder="用户名: 仅支持邮箱格式"
          prefix={getAntdIcon('UserOutlined')}
        />
        <SFields.Password
          { ...styleLayout }
          name="password"
          placeholder="密码: 支持大小写，不支持特殊符号"
          prefix={getAntdIcon('LockOutlined')}
        />
        <center className="mobile-number-login-automatic-login">
          <aside className="automatic-login">
            <SFields.Checkbox name="auto" label="自动登录" span={24} />
          </aside>
          <aside className="forget-your-password">
            忘记密码?
          </aside>
        </center>
      </SForm>
      <footer className="mobile-number-login-footer-btn">
        <Button
          block
          type="primary"
          size="large"
          onClick={(e) => loginHandle(e, true)}
        >
          登录
        </Button>
      </footer>
    </div>
  );
};

export default Index;
